import React, { useState } from "react";
import {
  Input,
  InputGroup,
  InputLeftElement,
  Button,
  Flex,
  Text
} from "@chakra-ui/react";
import { FaUserAlt, FaLock, FaMobile, FaQq, FaWeixin } from "react-icons/fa";
import { useFormik } from 'formik'
import * as Yup from 'yup'
import axios from 'axios'
export default function SignUp() {
  const [submitable,setSubmitable]=useState(true)
  const usernameerror = "昵称 昵称格式不正确，需要是2-15个字符，只能包含英文中文下划线，不能包含空格。"
  const formik = useFormik({
    initialValues: {
      username: "",
      email: "",
      password: ""
    },
    validateSchema: Yup.object({
      username: Yup.string()
        .required(usernameerror),
      // .matches(/^([\d\w\u4e00-\u9fa5_]+){2,15}$/, usernameerror),
      email: Yup.string()
        .email('邮箱格式不正确')
        .required('请输入邮箱'),
      password: Yup.string()
        .required('请输入密码')
    }),
    onSubmit: values => {
      setSubmitable(false)
      console.log(values)
      handleSubmit(values)
    }
  })
  async function handleSubmit(values) {
    const param = {
      user: values
    }
    try {
      const res = await axios.post('https://conduit.productionready.io/api/users', param)
      console.log(res)
      setSubmitable(true)
    } catch (error) {
      for (var key in error.response.data.errors) {

        alert(key + ' ' + error.response.data.errors[key][0])
      }
      setSubmitable(true)
    }
  }
  return (
    <form onSubmit={formik.handleSubmit}>
      <InputGroup>
        <InputLeftElement h={50} pointerEvents="none" children={<FaUserAlt color="gray.400" />} />
        <Input
          h={50}
          bgColor="hsla(0,0%,71%,.1)"
          _focus={{ boxShadow: "none" }}
          borderRadius="md"
          borderBottomRightRadius={0}
          borderBottomLeftRadius={0}
          placeholder="你的昵称"
          name="username"
          autoComplete="off"
          {...formik.getFieldProps('username')}
        />
        {
          formik.touched.username && formik.errors.username ?<div>{formik.errors.username}</div>:null
        }
      </InputGroup>
      <InputGroup>
        <InputLeftElement h={50} pointerEvents="none" children={<FaMobile color="gray.400" />} />
        <Input
          h={50}
          bgColor="hsla(0,0%,71%,.1)"
          _focus={{ boxShadow: "none" }}
          borderRadius="0"
          placeholder="邮箱"
          name="email"
          autoComplete="off"
          {...formik.getFieldProps('email')}
        />
      </InputGroup>
      <InputGroup>
        <InputLeftElement h={50} pointerEvents="none" children={<FaLock color="gray.400" />} />
        <Input
          bgColor="hsla(0,0%,71%,.1)"
          _focus={{ boxShadow: "none" }}
          h={50}
          borderRadius="md"
          borderTopLeftRadius={0}
          borderTopRightRadius={0}
          type="password"
          placeholder="设置密码"
          name="password"
          autoComplete="off"
          {...formik.getFieldProps('password')}
        />
      </InputGroup>
      <Button
        bgColor="#42c02e"
        mt="20px"
        color="#fff"
        w="100%"
        py="9px"
        px="18px"
        borderRadius="25px"
        cursor="pointer"
        _hover={{ bgColor: "#37a925" }}
        type="submit"
        isLoading={submitable===false}
        loadingText="请稍候"
      >
        注册
      </Button>
      <Text
        mx="0"
        my="10px"
        p="0"
        textAlign="center"
        fontSize="12px"
        lineHeight="20px"
        color="#969696"
      >
        点击 “注册” 即表示您同意并愿意遵守简书
        <br />
        <Text as="a"
          target="_blank"
          color="#3194d0"
          href="http://www.jianshu.com/p/c44d171298ce">用户协议</Text>
        "和"
        <Text as="a"
          target="_blank"
          color="#3194d0"
          href="http://www.jianshu.com/p/2ov8x3">隐私政策</Text>
      </Text>
      <Flex
        alignContent="center"
        justifyContent="center"
        pt="50px"
      >
        <Text as="span"
          w="60px"
          height="1px"
          my="auto"
          borderTop="1px solid #b5b5b5"
        />
        <Text as="h6"
          mx="20px"
          fontSize="0.75rem"
          px="0"
          py="0.6rem"
          color="gray.400"
        >社交帐号直接注册</Text>
        <Text as="span"
          w="60px"
          height="1px"
          borderTop="1px solid #b5b5b5"
          my="auto"
        />
      </Flex>
      <Flex
        alignContent="center"
        justifyContent="center"
        flexBasis="50px"
      >


        <Text
          as="a"
          target="_blank"
          href="https://www.jianshu.com/users/auth/wechat"
          mx="5px"
          h="100%"
          w="50px"
          padding="11px"
        >
          <FaWeixin fontSize="28px" color="#00bb29" />
        </Text>
        <Text
          as="a"
          target="_blank"
          href="https://www.jianshu.com/users/auth/qq_connect"
          mx="5px"
          h="100%"
          w="50px"
          padding="11px"
        >
          <FaQq fontSize="28px" color="#498ad5" />
        </Text>


      </Flex>
    </form>
  );
}
